<template>
  <div class="box flex-center" @click="onClick">
    <Icon v-if="value" :icon="value" />
  </div>
</template>
<script setup lang="ts">
  import { Icon } from '@/components/Icon';
  import { open } from '@/components/Popup';
  import IconList from './IconList.vue';
  import { ref, watch } from 'vue';

  const props = defineProps<{modelValue?: string}>()
  const emits = defineEmits(['update:modelValue'])

  const value = ref<string>(props.modelValue || 'si:close-line')
  function onClick() {
    open({title: '图标选择'}, IconList, { value: value.value, onChoose})
  }

  function onChoose(icon: string) {
    value.value = icon
  }

  watch(() => value.value, (val) => emits('update:modelValue', val))
  watch(() => props.modelValue, (val) => value.value = val)
</script>
<style lang="less" scoped>
  .box {
    border: 1px solid var(--el-border-color);
    border-radius: 4px;
    width: 28px;
    height: 28px;
    cursor: pointer;

    &:hover {
      border-color: rgba(6, 44, 44, 0.76);
    }
  }
</style>